span
<!-- 项目库 -->
<template>
  <div class="py-4 container-fluid">
    <div class="mt-4 row">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <h4 class="card-title">Projects</h4>
          </div>
          <div class="table-responsive">
            <el-table
              v-loading="loading"
              :data="tableData"
              header-row-class-name="thead-light text-secondary text-xxs font-weight-bolder opacity-7"
              @row-click="rowClick"
            >
              <el-table-column label="#" type="index" width="60" sortable />
              <el-table-column
                prop="name"
                label="Token"
                min-width="230"
                sortable
              >
                <template #default="{ row }">
                  <div class="d-flex align-items-center">
                    <div style="margin-right: 12px">
                      <img :src="row.image" class="rounded" width="30" />
                    </div>
                    <h6 class="mb-0 text-sm me-2">{{ row.name }}</h6>
                    <span class="text-muted">{{ row.symbol }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="current_price"
                label="Current Price"
                min-width="120"
                sortable
              >
                <template #default="{ row }">
                  <span class="">$ {{ row.current_price }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="price_change_percentage_24h"
                label="24H"
                min-width="80"
                sortable
              >
                <template #default="{ row }">
                  <div
                    class="d-flex align-items-center"
                    :class="
                      row.price_change_percentage_24h > 0
                        ? 'text-success'
                        : 'text-danger'
                    "
                  >
                    <i
                      v-if="row.price_change_percentage_24h > 0"
                      class="iconfont icon-shang_up font-weight-bolder me-1"
                    ></i>
                    <i
                      v-else
                      class="iconfont icon-xia_down font-weight-bolder me-1"
                    ></i>
                    <span class="font-weight-bolder"
                      >{{
                        removeMinusSign(row.price_change_percentage_24h)
                      }}%</span
                    >
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="signal.price"
                label="Signal Price"
                min-width="120"
                sortable
              >
                <template #default="{ row }">
                  <h6 v-if="row.signal.price" class="text-sm mb-0">
                    $ {{ row.signal.price }}
                  </h6>
                </template>
              </el-table-column>
              <el-table-column
                prop=""
                label="Backtest PnL"
                min-width="120"
                sortable
              >
                <template #default="{ row }">
                  <h6 class="text-sm mb-0">{{ row.signal.backtest_rate }}%</h6>
                </template>
              </el-table-column>
              <el-table-column
                prop="signal.signal"
                label="Action"
                min-width="100"
                sortable
              >
                <template #default="{ row }">
                  <span v-if="row.signal.signal == 1">做多</span>
                  <span v-if="row.signal.signal == 2">平多</span>
                  <span v-if="row.signal.signal == 3">做空</span>
                  <span v-if="row.signal.signal == 4">平空</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="signal.tradetime"
                label="Signal Interval"
                min-width="130"
                sortable
              >
                <template #default="{ row }">
                  <span v-if="row.signal.tradetime == 1">15F</span>
                  <span v-if="row.signal.tradetime == 2">1H</span>
                  <span v-if="row.signal.tradetime == 3">2H</span>
                  <span v-if="row.signal.tradetime == 4">6H</span>
                  <span v-if="row.signal.tradetime == 5">12H</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="signal.operate_time"
                label="Signal Time"
                width="160"
                sortable
              />
              <el-table-column prop="" width="220">
                <template #default="{ row }">
                  <div>
                    <soft-button
                      v-if="row.status == 0"
                      class="text-capitalize py-2"
                      variant="gradient"
                      color="dark"
                      full-width
                      @click.stop="addFavorites(row.id, row.status)"
                      >Add Favorites
                    </soft-button>
                    <soft-button
                      v-else
                      class="text-capitalize py-2"
                      variant="gradient"
                      color="secondary"
                      full-width
                      @click.stop="addFavorites(row.id, row.status)"
                      >Remove Favorites
                    </soft-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <!-- <table id="datatable-basic" class="table table-flush">
              <thead class="thead-light">
                <tr>
                  <th
                    class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
                    style="min-width: 70px"
                  >
                    #
                  </th>
                  <th
                    class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
                  >
                    Token
                  </th>
                  <th
                    class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
                    style="min-width: 150px"
                  >
                    Current Price
                  </th>
                  <th
                    class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
                  >
                    24H
                  </th>
                  <th
                    class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
                    style="min-width: 130px"
                  >
                    Signal Price
                  </th>
                  <th
                    class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
                    style="min-width: 140px"
                  >
                    Backtest PnL
                  </th>
                  <th
                    class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
                    style="min-width: 110px"
                  >
                    Action
                  </th>
                  <th
                    class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
                    style="min-width: 150px"
                  >
                    Signal Interval
                  </th>
                  <th
                    class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
                  >
                    Signal Time
                  </th>
                  <th
                    class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 edit"
                  ></th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(row, index) in tableData" :key="index">
                  <td>{{ index + 1 }}</td>
                  <td>
                    <div class="d-flex align-items-center">
                      <div style="margin-right: 12px">
                        <img :src="row.image" class="rounded" width="30" />
                      </div>
                      <h6 class="mb-0 text-sm me-2">{{ row.name }}</h6>
                      <span class="text-muted text-sm">{{ row.symbol }}</span>
                    </div>
                  </td>
                  <td>$ {{ row.current_price }}</td>
                  <td>
                    <div
                      class="d-flex align-items-center"
                      :class="
                        row.price_change_percentage_24h > 0
                          ? 'text-success'
                          : 'text-danger'
                      "
                    >
                      <i
                        v-if="row.price_change_percentage_24h > 0"
                        class="iconfont icon-shang_up font-weight-bolder me-1"
                      ></i>
                      <i
                        v-else
                        class="iconfont icon-xia_down font-weight-bolder me-1"
                      ></i>
                      <span class="font-weight-bolder"
                        >{{ row.price_change_percentage_24h }}%</span
                      >
                    </div>
                  </td>
                  <td>
                    <h6 v-if="row.signal.price" class="text-sm mb-0">
                      $ {{ row.signal.price }}
                    </h6>
                  </td>
                  <td></td>
                  <td>
                    <span v-if="row.signal.signal == 1">做多</span>
                    <span v-else-if="row.signal.signal == 2">平多</span>
                    <span v-else-if="row.signal.signal == 3">做空</span>
                    <span v-else-if="row.signal.signal == 4">平空</span>
                  </td>
                  <td>
                    <span v-if="row.signal.tradetime == 1">15F</span>
                    <span v-else-if="row.signal.tradetime == 2">1H</span>
                    <span v-else-if="row.signal.tradetime == 3">2H</span>
                    <span v-else-if="row.signal.tradetime == 4">6H</span>
                    <span v-else-if="row.signal.tradetime == 5">12H</span>
                  </td>
                  <td>
                    {{ row.signal.operate_time }}
                  </td>
                  <td>
                    <div>
                      <soft-button
                        v-if="row.status == 1"
                        class="text-capitalize py-2"
                        variant="gradient"
                        color="dark"
                        full-width
                        @click.stop="rowClick(row)"
                      >
                        Add Favorites
                      </soft-button>
                      <soft-button
                        v-else
                        class="text-capitalize py-2"
                        variant="gradient"
                        color="secondary"
                        full-width
                      >
                        Remove Favorites
                      </soft-button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { projectList, projectChoose } from "@/request/api.js";
import SoftButton from "@/components/SoftButton.vue";
// import { DataTable } from "simple-datatables";

export default {
  components: {
    SoftButton,
  },
  data() {
    return {
      tableData: [],
      loading: false,
    };
  },
  async created() {
    await this.getProjectList();
    // const dataTable = new DataTable("#datatable-basic", {
    //   searchable: false,
    //   fixedHeight: true,
    // });
  },
  mounted() {
    // eslint-disable-next-line no-unused-vars
  },
  methods: {
    // 字段处理
    removeMinusSign(str) {
      if (str.includes("-")) {
        return str.replace("-", "");
      }
      return str;
    },
    rowClick(row) {
      this.$router.push({
        name: "projectsDetails",
        params: {
          id: row.id,
        },
      });
      localStorage.setItem("project_id", row.id);
    },
    // 添加自选
    async addFavorites(id, status) {
      let params = {
        project_id: id,
        status: status == 1 ? "0" : "1",
      };
      let res = await projectChoose(params);
      if (res.code == 200) {
        this.getProjectList();
      }
    },
    // 获取项目列表
    async getProjectList() {
      let params = {
        page: 1,
        pageSize: 100,
      };
      this.loading = true;
      let res = await projectList(params);
      this.loading = false;
      this.tableData = res.data;
    },
  },
};
</script>

<style></style>
